extensions.json で指定された VS Code 拡張をコマンドで一括インストールする

シェルを使った力技です。

#VSCode（Visual Studio Code）

若槻龍太

2024.03.02

こんにちは、CX 事業本部製造ビジネステクノロジー部の若槻です。

VS Code（Visual Studio Code）では、ワークスペースやプロジェクトで導入を推奨したい拡張機能を指定することができます。

指定方法は、次のような extensions.json ファイルを .vscode ディレクトリに作成するだけです。

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "redhat.vscode-yaml",
    "Arjun.swagger-viewer"
  ]
}

しかし、この extensions.json に指定したからと言って自動で VS Code にインストールされるわけではなく、次のように RECOMMENDED の一覧に表示されるだけなので、この中から extensions.json で推奨された拡張機能を個別に手動でインストールする必要があります。それは少し手間ですね。

今回は、この extensions.json で指定された VS Code 拡張をコマンドを使って一括インストールするようにしてみました。

一括インストールする方法

いずれも extensions.json の内容をパースして code --install-extension コマンドを繰り返し実行すうという力技です。

シェルスクリプトを使う場合

次のシェルスクリプトを作成します。

#!/bin/bash

# extensions.json ファイルのパス
EXTENSIONS_FILE=".vscode/extensions.json"

# extensions.json が存在するか確認
if [ ! -f "$EXTENSIONS_FILE" ]; then
    echo "extensions.json ファイルが見つかりません: $EXTENSIONS_FILE"
    exit 1
fi

# recommendations を読み込み、それぞれの拡張機能をインストール
for ext in $(jq -r '.recommendations[]' $EXTENSIONS_FILE); do
    echo "拡張機能をインストールしています: $ext"
    code --install-extension $ext
done

echo "すべての拡張機能のインストールが完了しました。"

ターミナルで以下のコマンドを実行して、シェルスクリプトを実行可能にします。

chmod +x install-recommended-vscode-extensions.sh

シェルスクリプトを実行すると、すべての拡張機能がインストールされます。

$ ./install-recommended-vscode-extensions.sh
拡張機能をインストールしています: dbaeumer.vscode-eslint
Installing extensions...
Installing extension 'dbaeumer.vscode-eslint'...
(node:95823) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `Electron --trace-deprecation ...` to show where the warning was created)
Extension 'dbaeumer.vscode-eslint' v2.4.4 was successfully installed.
拡張機能をインストールしています: esbenp.prettier-vscode
Installing extensions...
Extension 'esbenp.prettier-vscode' v10.1.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: '[email protected]'.
拡張機能をインストールしています: redhat.vscode-yaml
Installing extensions...
Extension 'redhat.vscode-yaml' v1.14.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: '[email protected]'.
拡張機能をインストールしています: Arjun.swagger-viewer
Installing extensions...
Installing extension 'arjun.swagger-viewer'...
(node:95856) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `Electron --trace-deprecation ...` to show where the warning was created)
Extension 'arjun.swagger-viewer' v3.1.2 was successfully installed.
すべての拡張機能のインストールが完了しました。

esbenp.prettier-vscode と redhat.vscode-yaml はすでにインストールされているため、インストールされませんでした。

dbaeumer.vscode-eslint と Arjun.swagger-viewer は未インストールだったためインストールされました。DEP0005 の警告が出ていますが、これはインストールのプロセスに起因するものなので、code コマンドの今後のアップデートでの解消を待ちましょう。

npm scripts を使う場合

同じスクリプトを npm scripts に指定しておけば、シェルスクリプトを作成する必要がなくなります。

{
  "scripts": {
    "install:recommended-vscode-extensions": "for ext in $(jq -r '.recommendations[]' .vscode/extensions.json); do code --install-extension $ext; echo \"\"; done"
  }
}

npm run コマンドを実行すると一括でインストールできました。

$ npm run install:recommended-vscode-extensions 

> [email protected] install:recommended-vscode-extensions
> for ext in $(jq -r '.recommendations[]' .vscode/extensions.json); do code --install-extension $ext; echo ""; done

Installing extensions...
Extension 'dbaeumer.vscode-eslint' v2.4.4 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: '[email protected]'.

Installing extensions...
Extension 'esbenp.prettier-vscode' v10.1.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: '[email protected]'.

Installing extensions...
Extension 'redhat.vscode-yaml' v1.14.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: '[email protected]'.

Installing extensions...
Extension 'arjun.swagger-viewer' v3.1.2 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: '[email protected]'.

個人的にはこちらの方法の方が私は好みです。